<template>
    <div>
        <div class="editdata" v-if="value && value.length" @click="download">下载样例</div>
    </div>
</template>

<script>
import editChart from '@/js/element/chart.js';

export default {
    name: 'DownloadCsv',
    props: {
        value: {
            type: Array
        }
    },
    data() {
        return {};
    },
    methods: {
        exportCsv(obj) {
            let title = obj.title ? obj.title : '';
            let titleForKey = null;
            titleForKey = Object.keys(obj.data[0]);
            let data = obj.data;
            let str = [];
            if (title) str.push(obj.title.join(',') + '\n');
            for (let i = 0; i < data.length; i++) {
                let temp = [];
                for (let j = 0; j < titleForKey.length; j++) {
                    temp.push(data[i][titleForKey[j]]);
                }
                str.push(temp.join(',') + '\n');
            }
            let blob = new Blob(['\uFEFF' + str.join('')], {
                // type: "text/plain;charset=utf-8",
                type: 'text/json'
            });
            let downloadLink = document.createElement('a');
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = 'export.csv';
            downloadLink.click();
        },
        download() {
            let result = [];
            result = editChart.getDownload(this.value);
            this.exportCsv({
                data: result
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.editdata {
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    background: #ffffff0f;
    color: $FontWhite;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
        background: #ffffff33;
    }
}
</style>